<template>
  <div class="imgAndText_wrapper">
    <child-header class="header_fixed" :title="title"></child-header>
    <!-- 图文报告 -->
    <section class="imgAndText_content p_t_82">
      <div class="p_10">
        <div class="img_wrapper m_b_24 " @touchend="touchend($event,i)" @touchstart="touchstart($event,i)" @touchmove ="touchmove($event,i)" v-for="(v,i) in Powerfilmer" :key="i" >
          <div class="pinch-zoom" ref ="pinchZoom">
            <img :src="v.getFilePath" width="100%" alt="">  
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
import { HttpService } from "../../provides/index";
var PinchZoom = require("../../bin/pinch-zoom.umd.js");
export default {
  components: {},
  props: {},
  data() {
    return {
      title: "图文报告",
      filmId: "",
      Powerfilmer: [],
      pzs :[],
      isTouch :false
    };
  },
  watch: {},
  computed: {},
  methods: {
    getPowerfilmer(params) {
      //
      HttpService.api({
        url: "/powerfilmer", 
        params: params,
        headers: {}
      }).then(res => {
        this.Powerfilmer = res.result || [];
      });
    },
    touchstart(ev,i){
      this.isTouch = true;
      this.pzs[i].enabled =true;
    },
    touchmove(ev,i){
      if(ev.targetTouches.length >= 2){
        this.pzs[i].enabled = true;
      }else{
        let strArr =  this.$refs.pinchZoom[i].style.transform.split('scale(')[1].split(',');
      if(strArr[i] == 1){
        this.pzs[i].enabled =false;
       }else{
         this.pzs[i].enabled = true;
       }
      }
    },
    touchend(ev,i){
      this.isTouch = false;
      let self = this;
      setTimeout(()=>{
        self.pzs[i].enabled =false;
      },300);
    }
  },
  created() {},
  mounted() {
    let self = this;
    this.params = {
      patientid: this.$route.params.patientid,
      studyid: this.$route.params.studyid,
      hospcode: this.$route.params.hospcode,
      hospdomain:this.$route.params.hospdomain
    };
    this.getPowerfilmer(this.params);
      setTimeout(()=>{
      var els = document.getElementsByClassName('pinch-zoom');
          for( var i = 0; i<els.length; i++){
            var pz =  new PinchZoom.PinchZoom.default(els[i], {});
            pz.disable();
            self.pzs.push(pz);
          }
      },300);
  }
};
</script>
<style lang="scss" scoped>
.imgAndText_wrapper {
}
.imgAndText_content {
  .img_wrapper {
    height: 8.2rem;
    border: 1px solid rgb(183, 183, 183);
    border-radius: pxToRem(7);
    box-shadow: pxToRem(3) pxToRem(3) pxToRem(3) rgba(0, 0, 0, 0.29);
    img{
      display: block;
    }
  }
}
.header_fixed{
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
}

</style>